import React from 'react'
import { View, StyleSheet, FlatList, Text, Image } from 'react-native'
import { px2dp, compareDateHHmmss, dateFtt } from 'rn-xiaobu-utils'
import StationItem from './StationItem'
import flex from '../../../../configs/flex'
import skin from '../../../../configs/skin'

export default class BusStation extends React.Component {
  // 判断方向时候包含站点
  _includeStations () {
    let include = false
    let busNowID = []
    let allStationsID = []
    this.props.busNowApis.forEach(ele => {
      if (this.props.stations[this.props.stations.length - 1] !== ele.ID) {
        busNowID.push(ele.ID)
      }
    })
    this.props.stations.forEach(ele => {
      allStationsID.push(ele.DUALSERIAL_ID)
    })
    allStationsID.forEach(allele => {
      busNowID.forEach(nowele => {
        if (allele === nowele) {
          include = true
        }
      })
    })

    return include
  }
  // 没有车辆提示
  _noBusTips () {
    let tipsIcon, tipsText
    if (this.props.busNowApis) {
      if (this.props.busNowApis.length > 0 && this._includeStations()) {
      // 过末班时间还有车在线路
        if (compareDateHHmmss(
          dateFtt('hh:mm:ss', new Date()),
          this.props.endTime + ':00'
        ) &&
      compareDateHHmmss(
        this.props.startTime + ':00',
        dateFtt('hh:mm:ss', new Date())
      )) {
        // 未过时间显示等待发车
          tipsText = '等待发车'
        } else {
        // 过时间显示首班车未发出
          tipsText = '首班车未发出'
        }
        tipsIcon = require('../../../../../assets/img/Line/wait_time.png')
      } else {
      // 没有车在线路
        if (
          compareDateHHmmss(
            dateFtt('hh:mm:ss', new Date()),
            this.props.endTime + ':00'
          ) &&
        compareDateHHmmss(
          this.props.startTime + ':00',
          dateFtt('hh:mm:ss', new Date())
        )
        ) {
        // 在时间内显示暂无车辆信息
          tipsText = '暂无车辆信息'
          tipsIcon = require('../../../../../assets/img/Line/no_bus_info.png')
        } else {
        // 在时间外显示首班车未发出
          tipsText = '首班车未发出'
          tipsIcon = require('../../../../../assets/img/Line/wait_time.png')
        }
      }
    } else {
      tipsText = '暂无车辆信息'
      tipsIcon = require('../../../../../assets/img/Line/no_bus_info.png')
    }
    return (<View style={[flex.flexV, flex.flexVc, flex.flexHc]}><Image source={tipsIcon} style={styles.tipsIcon}></Image><Text style={skin.baseColorNoAcitve}>{tipsText}</Text></View>)
  }
  render () {
    return (
      <View style={[styles.stationWrapper, flex.flexV, flex.flexVc]}>
        <FlatList data={this.props.simpleDistance}
          horizontal
          ItemSeparatorComponent={()=>(<View style={styles.spliteBorder}></View>)}
          keyExtractor={(item, index)=>index + ''}
          ListEmptyComponent={()=>(this._noBusTips())}
          renderItem={({ item })=>{
            return (<StationItem stationNum={item.STOP_NBR} stationDis={item.DISTANCE}></StationItem>)
          }}></FlatList>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  stationWrapper: {
    width: px2dp(690),
    height: px2dp(200),
    backgroundColor: '#FFFFFF',
    borderRadius: px2dp(8),
    marginTop: px2dp(16)
  },
  spliteBorder: {
    width: px2dp(1),
    backgroundColor: '#EEEEEE',
    height: px2dp(108),
    marginTop: px2dp(46)
  },
  tipsIcon: {
    height: px2dp(82),
    width: px2dp(82),
    marginBottom: px2dp(12)
  }
})